<template>
    <div class="commentItem">
        <div v-for="(item, index) in comments" :key="index">
            <div>
                <div>
                    <img :src="item.user.avatar" alt />
                </div>
                <div>
                    <p>{{item.user.uname}}</p>
                    <p>{{item.time}}</p>
                </div>
            </div>
            <div>{{item.content}}</div>
            <div>
                <img v-for="(img, index) in item.images" :key="index" :src="img" alt />
            </div>
            <div id="none" v-if="!item.content">暂无评论...</div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        comments: {
            type: Array,
            default() {
                return [];
            }
        }
    }
    // inject:{
    //     app:{
    //         from:"This",//从父组件中的provide属性中的数据拿取所指定的
    //         // default:"nnn"
    //     }
    // },
    // mounted() {
    //     console.log(this.app);
    // },
};
</script>

<style lang="less" scoped>
.commentItem {
    > div {
        #none {
            // text-align: center;
            color: @black;
            font-size: 29px;
            text-indent: 40px;
            line-height: 1.7;
            margin: 20px 0;
        }
        margin-top: 30px;
        > div:nth-child(1) {
            &::after {
                content: "";
                display: block;
                clear: both;
            }
            div:first-child {
                float: left;
                margin-right: 20px;
                display: flex;
                align-items: center;
                img {
                    width: 100px;
                    height: 100px;
                    border-radius: 50px;
                }
            }
            div:last-child {
                float: left;
                p:first-child {
                    line-height: 2;
                }
                p:last-child {
                    color: @99;
                    font-size: 24px;
                    line-height: 1.5;
                }
            }
        }
        > div:nth-child(2) {
            color: @black;
            font-size: 29px;
            text-indent: 40px;
            line-height: 1.7;
            margin: 20px 0;
        }
        > div:nth-child(3) {
            &::after {
                content: "";
                display: block;
                clear: both;
            }
            img {
                width: 160px;
                height: 175px;
                vertical-align: top;
                float: left;
                margin: 0 17px 20px 0;
            }
        }
    }
}
</style>